<template>
  <div class="ly-emotion">
    <slot></slot>
  </div>
</template>

<script>
  import {emotionList} from '../../assets/common/emotionList'

  export default {
    data () {
      return {
        smallFaceSize: 77,
        topFaceIndex: [2, 3]
      }
    },
    name: 'ly-emotion',
    mounted () {
      const name = this.$el.innerHTML
      const list = emotionList

      let index = list.indexOf(name)
      let imgHTML = ''
      var time = new Date().getTime();
      if (index > this.smallFaceSize || this.topFaceIndex.indexOf(index) != -1) {
        imgHTML = `<img  style="width: 28px;height: 28px;" src="https://img-oss.yunshanmeicai.com/infocube/emotion/${index}.gif?time=" + ${time} >`
      } else {
        imgHTML = `<img src="https://img-oss.yunshanmeicai.com/infocube/emotion/${index}.gif?time="+ ${time}>`
      }
      this.$nextTick(() => {
        this.$el.innerHTML = imgHTML
      })
    },
  }
</script>
<style scoped>
  .ly-emotion {
    display: inline-block
  }

</style>
